import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { nanoid } from 'nanoid'
import header from './index.module.css'
export default class Header extends Component {
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}
	// 键盘事件的回调
	handleKeyUp = (e) => {
		const {keyCode, target} = e
		if (keyCode !== 13) return
		if (keyCode === 13) {
			if (target.value.trim() === '') {
				alert('输入字符不能为空')
				return
			}
			let obj = {id:nanoid(), name:target.value, done:false}
			this.props.addTodo(obj)
			target.value = ''
		}
	}
	render() {
		return (
			<div>
				<input onKeyUp={this.handleKeyUp} className={header.inputStyle} placeholder="请输入您的任务名称，按回车键确认"/>
			</div>
		)
	}
}
